<template>
    <view class="contentlist">
        <view class="search">
            <uni-search-bar bgColor="#fff" @confirm="search"  v-model="keyword"
            @cancel="scancelearch" @clear="search"></uni-search-bar>
        </view>
        <view class="lists">
            <scroll-view v-if="lists.length>=1" 
            :scroll-y="true"
          
            class="scroll-Y" 
         
			@scrolltolower="lower"
            :refresher-enabled="true" 
            :refresher-triggered="triggered"
            :refresher-threshold="100" 
            refresher-background="lightgreen"
            @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" 
            @refresherrestore="onRestore" 
            @refresherabort="onAbort"
            >
                <view class="scroll-view-item uni-bg-red" v-for="(item,index) in lists" :key="index">
                    <uni-card :is-shadow="true">
                       <view slot="title" class="title">
                           <view class="user">
                               <image class="headimg" :src="item.user.str_headimg" mode=""></image>
                               <view class="usertime">
                                   <view class="v1">{{item.user.username}}</view>
                                   <view class="v2">{{item.add_time}}</view>
                               </view>
                           </view>
                           <view class="action" >
                               {{item.status_name}}
                           </view>
                       </view>
                       <view class="content">
                           <view class="text">
                               <view class="bold">{{item.title}}({{item.cat == 1?'道具售后':'工程售后'}})</view>
                     
                               <view>{{item.content}}</view>
                           </view>
                           <view class="img" @click="showimg(item.images)" v-if="item.images.length>=1">
                               <image :src="item.images[0]" mode="widthFix"></image>
                           </view>
                       </view>
                       <view class="footer">
                           <view class="user">
                               <view class="headimg">
                                   <image :src="item.client.headimg" v-if="item.client.headimg" mode="widthFix"></image>
                                   <image src="@/static/logo.png" v-else mode="widthFix"></image>
                               </view>
                               <view class="nickname">{{item.client.username}} </view>
                               <view class="brand">&nbsp;&nbsp; {{item.brand}} </view>
                           </view>
                           <view>
                         
                               <view class="btnt btn2" @click="$navto(`/pages/sales/post?id=${item.id}`)" v-if="item.is_edit">编辑</view>
                               <view class="btnt btn1" @click="$navto(`/pages/sales/details?id=${item.id}`)" v-else>详情</view>
                               
                               <view class="btnt btn3" @click="del(item.id,index)" v-if="item.is_edit">删除</view>
                           </view>
               
                           
                       </view>
                    </uni-card>
                    
                    
                </view>
                <view class="more">
                    <template v-if="page<last_page">
                        加载更多~
                    </template>    
                    <template v-else>
                        没有更多了~
                    </template>
                </view> 
            </scroll-view>
            <view v-else class="empty">
                <u-empty text="内容为空" mode="list"></u-empty>
            </view>
        </view>
        <view class="btn" @click="$navto('/pages/sales/post')" v-if="role_id != 1 && role_id!=11">
            添加售后
        </view>
        <tabbar current="sales" v-if="role_id == 1"></tabbar>
    </view>
</template>

<script>
import tabbar from "@/components/tabbar.vue"
export default{
    name:"sales",
    components:{
      tabbar  
    },
    data(){
        return{
           keyword:"",
           lists:[],
           page:1,
           last_page:1,
           triggered: false,
           _freshing:false,
           role_id:0
        }
    },
    onShow() {
      
    },
    onLoad() {
        this.lists = []
        this.last_page = 1
        this.getlist()
        this.role_id = uni.getStorageSync('nantong_role_id');
    },

    methods:{
        del(id,index){
            this.$confirm("是否确认删除？删除后不可找回").then(()=>{
                this.lists.splice(index,1)
            })
        },
        scancelearch(){
            
        },
        search(){
            
        },
        getlist(){
            this.$api.get(`sales_after/lists?page=${this.page}&keyword=${this.keyword}`).then(({data})=>{
                console.log("data",data)
                this.lists = this.lists.concat(data.data)
                this.last_page = data.last_page
                this.triggered = false;
                this._freshing = false;
            })
        },
     
        showimg(data){
            uni.previewImage({
                urls:data
            })
        },
        lower(){
            if(this.page<this.last_page){
                this.page +=1
                this.getlist()
            }
        },
        onPulling(e) {
           
    
        },
        onRefresh() {
            if (this._freshing) return;
            this._freshing = true;
            this.triggered = true;
            this.lists = []
            this.page = 1
            this.getlist()
        },
        onRestore() {
            
            this.triggered = false;
            this._freshing = false;
            console.log(2222)
        },
        onAbort() {
            console.log("onAbort");
            uni.hideLoading()
        }
        
    }
}
</script>

<style lang="less">
    .contentlist{
        padding: 20rpx;
        .lists{
            height: 68vh;
            width: 100%;
        }
        .btn{
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            color: #fff;
            background-color: #2979ff;
            border-radius: 10rpx;
            margin-top: 40rpx;
        }
    }
    .icon{
        margin-right: 10rpx;
    }
    .phone{
        color: #2979ff;
    }
    .title{
        height: 120rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .headimg{
                width: 60rpx;
                height: 60rpx;
                border-radius: 10rpx;
            }
            .usertime{
                margin-left: 25rpx;
                .v1{
                    font-size: 28rpx;
                    font-weight: bold;
                }
                .v2{
                    font-size: 24rpx;
                    color: #c7c9ce;
                }            
            }
        }
        
       .action{
           height: 100%;
           padding-top: 60rpx;
       } 
    }
        
    .content{
        display: flex;
        justify-content: space-between;
        .text{
            font-size: 24rpx;
        }
        .img{
            width: 150rpx;
            height: 150rpx;
            overflow: hidden;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
    .nav-item{
        font-size: 26rpx;
    }
    .footer{
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        .user{
            display: flex;
            align-items: center;
           .headimg{
               width: 60rpx;
               height: 60rpx;
               margin-right: 10rpx;
               image{
                   width: 60rpx;
                   height: 60rpx;
                   border-radius: 50%;
               }
           }
            .brand{
                font-size: 26rpx;
                color: #8f939c;
                margin-left: 10rpx;
            }
        }
        .btnt{
            display: inline-block;
            padding: 0 20rpx;
            border-radius: 10rpx;
            font-size: 24rpx;
            height: 50rpx;
            line-height: 50rpx;
        }
        .btn1{
            background-color: #2979ff;
            color: #fff;
            margin-right: 30rpx;
        }
        .btn2{
            border: 1px solid #6a6a6a;
        }
        .btn3{
            border: 1px solid red;
            color: red;
            margin-left: 20rpx;
        }
    }
</style>